<template>
    <div class="wrapper">
        <div class="imgfa">
            <img src="../assets/编组.svg"  />
        </div>
        <div class="formfa">
            <div class="input_item">
                <input type="text" placeholder="请输入用户名" />
            </div>
            <div class="input_item">
                <input type="text" placeholder="请输入密码" />
            </div>
            <div class="input_item">
                <input type="text" placeholder="确认密码" />
            </div>
        </div>
        <div class="btnfa">
            <button class="login" @click="handleRegister">注册</button>
            <div class="btn_bottom">
                <span @click="gotoLogin">已有账号去登陆</span>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import {useRouter} from 'vue-router'
const router = useRouter()
const handleRegister = () =>{

}
const gotoLogin = () => {
    router.push({name:"Login"})
}
</script>

<style lang="scss" scoped>
.wrapper {
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    .imgfa {
        width: 0.66rem;
        height: 0.66rem;
        // margin-bottom: .4rem;
        margin: 0 auto 0.4rem auto;
        img {
            width: 100%;
            height: 100%;
        }
    }
    .formfa {
        .input_item {
            width: 2.95rem;
            // height: .48rem;
            background: #f9f9f9;
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 6px;
            margin: 0 auto 0.16rem auto;
            input {
                box-sizing: border-box;
                width: 100%;
                height: 100%;
                border: none;
                padding: 0.12rem 0.16rem;
                font-size: 0.16rem;
                color: rgba(0, 0, 0, 0.5);
                letter-spacing: 0;
                line-height: 0.24rem;
                background: transparent;
                &:focus {
                    outline: none;
                }
            }
        }
    }
    .btnfa {
        .login {
            width: 2.95rem;
            height: .48rem;
            background: #0091ff;
            box-shadow: 0 4px 8px 0 rgba(0, 145, 255, 0.32);
            border-radius: 4px;
            color: #fff;
            border: none;
            display: block;
            margin: 0 auto .16rem auto;
            font-size: .16rem;
        }
        .btn_bottom{
           display: flex;
           justify-content: center;
           align-items: center;
           span{
            color: rgba(0,0,0,0.50);
            display: inline-block;
            margin: 0 .12rem;
           }
           button{
               border: none;
               background-color:transparent;
               font-size: .14rem;
                color: rgba(0,0,0,0.50);
                padding:0;
           }
        }
    }
}
</style>